<template>
  <div class="block">
    <el-carousel height="180px">
      <el-carousel-item v-for="(item, index) in logos" :key="index">
        <div class="logo-bg flex flex-h flex-align-center flex-justify-center"  @click="logoClick(item)"
             :style="{ background: `url(${item.image}) -1000px`}">
          <div>
            <p style="text-align: center">{{item.title}}</p>
            <p style="text-align: center">{{item.desc}}</p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import {Carousel, CarouselItem} from 'element-ui'

export default {
  props: {
    logos: Array
  },
  components: {
    elCarousel: Carousel,
    elCarouselItem: CarouselItem
  },
  mounted () {
  },
  data () {
    return {
    }
  },
  methods: {
    logoClick (item) {
      this.$router.push(item.src)
      this.$store.commit('selectNav', item.moduleNum)
    }
  }
}
</script>

<style scoped>
  .logo-bg {
    height: 180px;
  }
</style>
